<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>处方管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 菜单标题模块
    <span id="title"><b>处方管理</b></span> -->

    <!-- 搜索模块 -->
    <div id="shaixuan_1">&nbsp;<i class="iconfont icon-shaixuan"></i>
      <span slot="title">筛选</span>
    </div>
    <div id="shaixuan_2">
      <div id="text">
        <font>处方编号：</font>
      </div>
      <div id="input">
        <el-input v-model="searchForm.no" placeholder="请输入处方编号 "></el-input>
      </div>
      <div id="date">
        <font>提交时间：</font>
        <el-date-picker v-model="date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div id="button">
        <el-button type="primary" @click="search()">筛选</el-button>
        <el-button type="danger" @click="batchDelete()">批量删除</el-button>
      </div>
    </div>

    <!-- 横向导航栏 -->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="width: 90%">
      <el-menu-item index="4" style="width: 25%;text-align:center">全部</el-menu-item>
      <el-menu-item index="0" style="width: 25%;text-align:center">审核未通过</el-menu-item>
      <el-menu-item index="1" style="width: 25%;text-align:center">审核已通过</el-menu-item>
      <el-menu-item index="2" style="width: 25%;text-align:center">审核中</el-menu-item>
    </el-menu>

    <!-- 全部处方——数据显示列表 -->
    <el-table :data="prescriptionData_all" style="width: 90%" ref="multipleSelectable" v-if="status_show.all" :row-key="getRowKeys" @selection-change="handleSelectionChange" highlight-current-row>
      <el-table-column align="center" type="selection" width="60" :reserve-selection="true"></el-table-column>
      <el-table-column prop="no" label="处方编号" width="200" ></el-table-column>
      <el-table-column prop="user_name" label="患者" width="200" ></el-table-column>
      <el-table-column prop="doctor_name" label="医生" width="200"></el-table-column>
      <el-table-column prop="cost" label="花费" width="200"></el-table-column>
      <el-table-column prop="join_time" label="创建时间" width="200"></el-table-column>
      <el-table-column label="操作" min-width="400" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDel(scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="showPrescription(scope.row)">查看处方</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 审核未通过处方——数据显示列表 -->
    <el-table :data="prescriptionData_dif" style="width: 90%" ref="multipleSelectable" v-if="status_show.no" :row-key="getRowKeys" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="no" label="处方编号" width="250" ></el-table-column>
      <el-table-column prop="user_name" label="患者" width="250" ></el-table-column>
      <el-table-column prop="doctor_name" label="医生" width="250"></el-table-column>
      <el-table-column prop="cost" label="花费" width="250"></el-table-column>
      <el-table-column label="操作" min-width="400" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDel(scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="showPrescription(scope.row)">查看处方</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 审核已通过处方——数据显示列表 -->
    <el-table :data="prescriptionData_dif" style="width: 90%" ref="multipleSelectable" v-if="status_show.yes" :row-key="getRowKeys" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="no" label="处方编号" width="250" ></el-table-column>
      <el-table-column prop="user_name" label="患者" width="250" ></el-table-column>
      <el-table-column prop="doctor_name" label="医生" width="250"></el-table-column>
      <el-table-column prop="cost" label="花费" width="250"></el-table-column>
      <el-table-column label="操作" min-width="400" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDel(scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="showPrescription(scope.row)">查看处方</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 正在审核处方——数据显示列表 -->
    <el-table :data="prescriptionData_dif" style="width: 90%" ref="multipleSelectable" v-if="status_show.ing" :row-key="getRowKeys" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="no" label="处方编号" width="250" ></el-table-column>
      <el-table-column prop="user_name" label="患者" width="250" ></el-table-column>
      <el-table-column prop="doctor_name" label="医生" width="250"></el-table-column>
      <el-table-column prop="cost" label="花费" width="250"></el-table-column>
      <el-table-column label="操作" min-width="400" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDel(scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="showPrescription(scope.row)">查看处方</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页模块 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageparm.currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageparm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageparm.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  created() {
    this.getPrescription_all();
    
    console.log(localStorage.getItem("Authorization"));
  },
  data () {
    return {
      //搜索框数据
      searchForm: {
        id: '',
        no: '',
        join_time: '',
        doctor_id: '',
        user_id: '',
        diagnosis: '',
        opinion: '',
        cost: '',
        checked_status: '',
        create_time: '',
        update_time: ''
      },
      //全部处方数据
      prescriptionData_all:[],
      //不同审核状态处方数据
      prescriptionData_dif:[],
      //分页数据
      pageparm:{
        currentPage: 1,
        pageSize: 5,
        total: 10
      },
      //搜索框-时间快捷选择器
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      //搜索框-日期数据
      date:'',
      //横向菜单默认激活索引
      activeIndex: '4',
      //控制数据列表显示
      status_show:{
        all: true,
        no: false,
        yes: false,
        ing: false,
      },
      //id数组
      multipleSelection: []
    }
  },
  methods: {
    //获取全部处方数据
    getPrescription_all(){
      this.$axios.get('/prescription/'+this.pageparm.currentPage+'/'+this.pageparm.pageSize).then(res => {
      if(res.data.code == 200){
        this.prescriptionData_all = res.data.data.list

        //查询用户姓名
        for (let index = 0; index < this.prescriptionData_all.length; index++) {
          this.$axios.get('/prescription/findByRecord/'+this.prescriptionData_all[index].user_id).then(res2 => {
            if(typeof res.data.data.list[index].user_name == 'undefined'){
              //局部添加后端返回数据的字段
              this.$set(res.data.data.list[index],"user_name",true)
            }
            res.data.data.list[index].user_name = res2.data.data.name
          }).catch();
        }
        
        //查询医生信息
        for (let index = 0; index < this.prescriptionData_all.length; index++) {
          this.$axios.get('/prescription/findDoctorById/'+this.prescriptionData_all[index].doctor_id).then(res3 => {
            if(typeof res.data.data.list[index].doctor_name == 'undefined'){
              //局部添加后端返回数据的字段
              this.$set(res.data.data.list[index],"doctor_name",true)
            }
            res.data.data.list[index].doctor_name = res3.data.data.name
          }).catch();
        }

        this.prescriptionData_all = res.data.data.list
        this.pageparm.total = res.data.data.total

      }
      }).catch();
    },
    //点击横向菜单触发方法
    handleSelect(key, keyPath) {
      //点击菜单后发送axios根据不同的keyPath进行不同的处方查询
      this.$axios.get('/prescription/'+this.pageparm.currentPage+'/'+this.pageparm.pageSize+'/'+keyPath).then(res => {
      console.log(res);
      if(res.data.code == 200){
        // this.prescriptionData_dif = res.data.data.list

        //查询用户姓名
        for (let index = 0; index < res.data.data.list.length; index++) {
          this.$axios.get('/prescription/findByRecord/'+res.data.data.list[index].user_id).then(res2 => {
            if(typeof res.data.data.list[index].user_name == 'undefined'){
              //局部添加后端返回数据的字段
              this.$set(res.data.data.list[index],"user_name",true)
            }
            res.data.data.list[index].user_name = res2.data.data.name
          }).catch();
        }
        
        //查询医生信息
        for (let index = 0; index < res.data.data.list.length; index++) {
          this.$axios.get('/prescription/findDoctorById/'+res.data.data.list[index].doctor_id).then(res3 => {
            if(typeof res.data.data.list[index].doctor_name == 'undefined'){
              //局部添加后端返回数据的字段
              this.$set(res.data.data.list[index],"doctor_name",true)
            }
            res.data.data.list[index].doctor_name = res3.data.data.name
          }).catch();
        }

        this.prescriptionData_dif = res.data.data.list
        this.pageparm.total = res.data.data.total
      }
      }).catch();
      if(keyPath == '4'){
        //如果状态为4，直接调用 getPrescription_all 来获取所有处方数据
        this.getPrescription_all()
        this.status_show.all = true
        this.status_show.no = false
        this.status_show.yes = false
        this.status_show.ing = false
      }
      if(keyPath == '0'){
        this.status_show.all = false
        this.status_show.no = true
        this.status_show.yes = false
        this.status_show.ing = false
      }
      if(keyPath == '1'){
        this.status_show.all = false
        this.status_show.no = false
        this.status_show.yes = true
        this.status_show.ing = false
      }
      if(keyPath == '2'){
        this.status_show.all = false
        this.status_show.no = false
        this.status_show.yes = false
        this.status_show.ing = true
      }
    },
    //更改每页大小触发方法
    handleSizeChange(val) {
      this.pageparm.pageSize = val;
      this.getPrescription_all();
    },
    //更改当前页触发方法
    handleCurrentChange(val) {
      this.$axios.get('/prescription/'+val+'/'+this.pageparm.pageSize).then(res => {
      console.log(res);
      if(res.data.code == 200){
        this.prescriptionData_all = res.data.data.list

        //查询用户姓名
        for (let index = 0; index < this.prescriptionData_all.length; index++) {
          this.$axios.get('/prescription/findByRecord/'+this.prescriptionData_all[index].user_id).then(res2 => {
            if(typeof res.data.data.list[index].user_name == 'undefined'){
              //局部添加后端返回数据的字段
              this.$set(res.data.data.list[index],"user_name",true)
            }
            res.data.data.list[index].user_name = res2.data.data.name
          }).catch();
        }
        
        //查询医生信息
        for (let index = 0; index < this.prescriptionData_all.length; index++) {
          this.$axios.get('/prescription/findDoctorById/'+this.prescriptionData_all[index].doctor_id).then(res3 => {
            if(typeof res.data.data.list[index].doctor_name == 'undefined'){
              //局部添加后端返回数据的字段
              this.$set(res.data.data.list[index],"doctor_name",true)
            }
            res.data.data.list[index].doctor_name = res3.data.data.name
          }).catch();
        }

        this.prescriptionData_all = res.data.data.list
        this.pageparm.total = res.data.data.total
      }
      }).catch();
    },
    //批量删除
    batchDelete(){
      if(this.multipleSelection.length==0){
            this.$message({
                type: "info",
                message: "请勾选需要删除的列",
            });
            return;
        }
        this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        })
        .then(() => {
            this.$axios.put("/prescription/batchDelete",this.multipleSelection)
            .then((res) => {
              this.$refs.multipleSelectable.clearSelection();
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "已删除!",
                });
                //刷新全部处方数据
                this.getPrescription_all();
              } else {
                this.$message({
                  type: "info",
                  message: res.data.message,
                });
              }
            })
            .catch((err) => {
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取行id
    getRowKeys(row) {
      return row.id;
    },
    //获取被勾选的处方的id
    handleSelectionChange(prescription) {
      for(let index in prescription){
        this.multipleSelection[index] = prescription[index].id;
      }
    },
    //查看处方详情
    showPrescription(row){
      this.$router.push("/index/prescriptionDetail")
      window.sessionStorage.setItem("prescription", JSON.stringify(row));
    },
    // 搜索事件
    search() {
      this.searchForm.create_time = this.date[0];
      this.searchForm.update_time = this.date[1];
      this.$axios.post('/prescription/search',this.searchForm).then(res => {
        if(res.data.code == 200){

          //查询用户姓名
          for (let index = 0; index < res.data.data.length; index++) {
            this.$axios.get('/prescription/findByRecord/'+res.data.data[index].user_id).then(res2 => {
              if(typeof res.data.data[index].user_name == 'undefined'){
                // 局部添加后端返回数据的字段
                this.$set(res.data.data[index],"user_name",true)
              }
              res.data.data[index].user_name = res2.data.data.name
            }).catch();
          }
          
          //查询医生信息
          for (let index = 0; index < res.data.data.length; index++) {
            this.$axios.get('/prescription/findDoctorById/'+res.data.data[index].doctor_id).then(res3 => {
              if(typeof res.data.data[index].doctor_name == 'undefined'){
                //局部添加后端返回数据的字段
                this.$set(res.data.data[index],"doctor_name",true)
              }
              res.data.data[index].doctor_name = res3.data.data.name
            }).catch();
          }

        }
        this.prescriptionData_all = res.data.data
        this.status_show.all = true
        this.status_show.no = false
        this.status_show.yes = false
        this.status_show.ing = false
        this.pageparm.total = res.data.data.length
        console.log(res.data.data);
      }).catch(()=>{});
    },
    //编辑方法
    handleEdit(){
      
    },
  }
}
</script>

<style scoped>
#title {
  font-size: 30px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}

#data_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#data_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  overflow: hidden;
}
#data_2_1 {
  /* border: 1px solid red; */
  height: 50px;
}
.menu {
  width: 25%;
  text-align: center;
}
#data_2_2 {
  margin-top: 20px;
}

#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}

.block {
  margin-left: 400px;
  margin-top: 30px;
}
</style>
